import React,{Suspense} from 'react';
import 'antd/dist/antd.css';
import {Menu, Button, Layout} from 'antd';
import {
    PieChartOutlined, MailOutlined,} from '@ant-design/icons';
import {router} from "../router";
import {
    BrowserRouter as Router,
    Switch,
    Route,
    Link
} from "react-router-dom";


const { SubMenu } = Menu;
const { Header, Footer, Sider, Content } = Layout;

function SuspenseDemo() {
    return (
        <div >
            <Router>
                <Suspense fallback={<>loading</>} >
                <div style={{width:200}}>
                    <Menu
                        defaultSelectedKeys={['1']}
                        defaultOpenKeys={['sub1']}
                        mode="inline"
                        theme="dark"
                    >{
                        router.map((r,index)=>{
                            if (r.children){
                                return (
                                    <SubMenu key={r.id} title={r.title} icon={<MailOutlined />} >
                                        {
                                            r.children.map((r1,index) =>(
                                                <Menu.Item key={r1.id} >
                                                    <Link to={r1.path}>{r1.title}</Link>
                                                </Menu.Item>
                                            ))
                                        }
                                    </SubMenu>
                                )
                            }else {
                                return (
                                    <Menu.Item key={r.id} icon={<PieChartOutlined />}>
                                        option1
                                        <Link to={r.path}>{r.title}</Link>
                                    </Menu.Item>
                                )
                            }
                        })
                    }
                    </Menu>
                </div>
                <Switch>
                    {
                        router.map((r,index) =>{
                            if (r.children){
                                return (
                                    <Route path={r.path} exact={r.exact} key={r.id}>
                                        {r.component}
                                        <Switch  key={r.id}>
                                            {
                                                r.children.map((r1,index) =>{
                                                    return (
                                                        <Route key={r1.id} path={r1.path} exact={r1.exact}>
                                                            {r1.component}
                                                        </Route>
                                                    )
                                                })
                                            }
                                        </Switch>
                                    </Route>
                                )
                            }else {
                                return (
                                    <Route key={r.id} path={r.path} exact={r.exact}>
                                        {r.component}
                                    </Route>
                                )
                            }
                        })
                    }
                </Switch>
                </Suspense>
            </Router>
        </div>
    );
}

export default SuspenseDemo;
